import { observable, action, runInAction } from 'mobx';
import { IPageData } from '../interfaces/IPageData';
import { getPageList, getSelectList, getAgeList } from '../api';
import { IInputText } from '../interfaces/IInputText';
import { IOption } from '@casstime/bricks/dist/src/components/select/DropdownList';

class TestPageStore {
  public checked = false;

  /** 数据 */
  @observable list: IPageData[] = [];

  /** name下拉框值 */
  @observable selectList: IOption[] = [];

  /** age下拉框值 */
  @observable selectAgeList: IOption[] = [];

  /** name下拉框选择值 */
  @observable selectValue: IOption = { value: '', label: '全部' };

  /** age下拉框选择值 */
  @observable selectAge: IOption = { value: '', label: '不限' };

  /** 分页页数 */
  @observable page: number = 1;

  /** 全选标记 */
  @observable allChecked: boolean = false;

  /** 删除二次确认弹出框 */
  @observable showDeleteConfirm: boolean = false;

  /** 删除的index */
  @observable index: number = -1;

  /** 名称修改输入框 */
  @observable inputText: IInputText[] = [];

  /** 地址输入框 */
  @observable addressText: string = '';

  /**
   * 渲染数据
   */
  @action
  async getData() {
    const data: IPageData[] = await getPageList();
    const list: IOption[] = await getSelectList();
    const ageList: IOption[] = await getAgeList();
    runInAction(() => {
      this.list = [...data];
      this.selectList = [...list];
      this.selectAgeList = [...ageList];
      this.selectList.unshift({ value: '', label: '全部' });
      this.selectAgeList.unshift({ value: '', label: '不限' });
      this.list = this.list.map(item => {
        return {
          ...item,
          name: item.name + this.page
        };
      });
      this.inputText = this.list.map(item => {
        return {
          key: item.key,
          value: item.name
        };
      });
      if (this.selectValue.value !== '') {
        this.list = this.list.filter(
          item => this.selectValue.value === item.name
        );
      }
      if (this.selectAge.value !== '') {
        this.list = this.list.filter(
          item => item.age.toString() === this.selectAge.value
        );
      }
    });
  }

  /**
   * 勾选框单选
   */
  @action
  check(checked: boolean, key: string) {
    this.list = this.list.map(item => {
      return {
        ...item,
        checked: item.key === key ? checked : item.checked
      };
    });
    this.allChecked = this.list.every(item => !!item.checked);
  }

  /**
   * 勾选框批量操作
   * @param checked
   */
  @action
  checkAll(checked: boolean) {
    this.allChecked = checked;
    this.list = this.list.map(item => {
      return {
        ...item,
        checked: checked
      };
    });
  }

  /**
   * 修改name方法
   * @param index
   * @param change
   */
  @action
  changeInput(change: boolean, key: string) {
    if (!change) {
      this.saveName(key);
    }
    this.list = this.list.map(item => {
      if (item.key === key) {
        return {
          ...item,
          changeNameIndex: change
        };
      }
      return item;
    });
  }

  /**
   * 删除方法
   */
  @action
  removeListItem() {
    if (this.index >= 0) {
      this.list.splice(this.index, 1);
    }
  }

  /**
   * 保存名称
   * @param index
   */
  @action
  saveName(key: string) {
    let name: string | undefined = '';
    this.inputText.forEach(item => {
      if (item.key === key) {
        name = item.value;
      }
    });
    this.list = this.list.map(item => {
      if (key === item.key && name !== undefined) {
        return {
          ...item,
          name: name
        };
      }
      return item;
    });
  }

  @action
  getChangeNameText(key: string): string {
    let name = '';
    this.inputText.forEach(item => {
      if (key === item.key) {
        name = item.value;
      }
    });
    return name;
  }

  /**
   * 更改名称
   * @param index
   * @param newName
   */
  @action
  changeName(key: string, newName: string) {
    // this.list = this.list.map((item, i) => {
    //   return item;
    // });
    this.inputText = this.inputText.map(item => {
      if (key === item.key) {
        return {
          key: key,
          value: newName
        };
      }
      return item;
    });
  }

  /**
   *  name下拉框改变
   * @param option
   */
  @action
  selectOnChange(option: IOption) {
    this.selectValue = option;
  }

  /**
   * age下拉框改变
   * @param option
   */
  @action
  selectAgeOnChange(option: IOption) {
    this.selectAge = option;
  }

  /**
   * 重置按钮调用方法
   */
  @action
  reset() {
    this.page = 1;
    this.selectAge = { value: '', label: '不限' };
    this.selectValue = { value: '', label: '全部' };
    this.addressText = '';
    this.getData();
  }

  /**
   * 地址输入框改变方法
   * @param address
   */
  @action
  addressOnChange(address: string) {
    this.addressText = address;
  }
}
export default TestPageStore;
